<template>
  <!-- 服务 -->
  <view v-if="list" :style="contentStyle" class="server" @click="openServiceVisible">
    <view style="display:flex;flex: 1;align-items: center">
      <view v-if="title" class="_title">{{ title }}</view>
      <x-icon name="icon-089" size="34" color="#00C800" class="icon" />
      <template v-for="(item, index) in list">
        <view class="_text" v-if="index < 3" :key="index">
          {{ item.dictNote }}
        </view>
      </template>
    </view>
    <view v-if="suffix" class="rt-icon">
      <x-icon name="icon-017" size="24" color="#999999" />
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'PServer',
  components: {
    XIcon
  },
  props: {
    serveList: {
      type: [Array, null],
      default: () => []
    },
    title: {
      type: [String, Boolean],
      default: '服务'
    },
    suffix: {
      type: Boolean,
      default: false
    },
    contentStyle: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {};
  },
  computed: {
    list() {
      const specificValue = '运费险';
      if (this.serveList && this.serveList.length) {
        const list = this.serveList;
        return list.sort((a, b) => {
          if (a.dictNote === specificValue) {
            return -1;
          } else if (b.dictNote === specificValue) {
            return 1;
          } else {
            return a.sortNum - b.sortNum;
          }
        });
      } else {
        return null;
      }
    }
  },
  methods: {
    //  打开服务信息弹框
    openServiceVisible() {
      this.$emit('showServiceDrawer', true);
    }
  }
};
</script>

<style lang="scss">
//  服务
.server{
  border-top: 2px solid $uni-page-bg;
  background: #FFFFFF;
  padding: 24px;
  display: flex;
  ._title{
    font-size: 30px;
    color: $uni-color-default;
    margin-right: 30px;
  }
  .icon{
    margin-right: 10px;
  }
  ._text{
    color: $uni-color-default;
    display: flex;
    align-items: baseline;
    font-size: 26px;
    &:after{
      content: "·";
    }
    &:last-child:after{
      content: normal;
    }
  }
  .rt-icon{
    display: flex;
    align-items: center;
    justify-content: right;
  }
}
</style>
